<template>
	<view class="screen-publish-2">
		<view class="screen-publish-2-box">
			<view
				v-for="nav in item.list"
				class="_for"
				@click="$_to(nav.url)"
				:style="nav.css">
				<view class="_for-icon">
					<text :class="'iconfont ' + nav.iconfont" :style="'color:' + nav.iconfontColor"></text>
				</view>
				<view class="_for-right">
					<view
						:style="nav.nameCss"
						class="_for-right-title">
						{{nav.name}}</view>
					<view
						:style="nav.descriptionCss"
						class="_for-right-description">
						{{nav.description}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"screen-publish-2",
		props:{
			item:{
				type:Object,
				default:null
			}
		}
	}
</script>

<style lang="scss" scoped>
.screen-publish-2{
	.screen-publish-2-box{
		width: 100%;
		position: absolute;
		left: 0;
		bottom: var(--window-bottom);
		._for{
			width: 500rpx;
			height: 120rpx;
			display: flex;
			align-items: center;
			margin: 0 auto 25rpx auto;
			padding: 0 10rpx;
			._for-icon{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100rpx;
				height: 100rpx;
				background: #FFF;
				border-radius: 100rpx;
				line-height: 60rpx;
				text{
					font-size: 60rpx;
				}
			}
			._for-right{
				margin-left: 15rpx;
				._for-right-title{
					line-height: 32rpx;
					font-size: 32rpx;
					color: #FFF;
				}
				._for-right-description{
					font-size: 22rpx;
					line-height: 22rpx;
					padding-top: 15rpx;
					color: #FFF;
				}
			}
		}
	}
}
</style>